<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>阅读</title>
    <link rel="stylesheet" href="/js/bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    
    <br>
    <div class="row">
        <table id="file-table" class="table table-bordered table-striped table-hover table-condensed">
            <thead>
            <tr>
                <th>文件名</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>
<script src='/js/jquery-3.6.4.min.js'></script>
<script src="/js/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script>
    var fileTableBody = $("#file-table tbody");

    // 获取文件列表并显示在表格中
    function getFileList() {
        $.getJSON("/read/list", function (result) {
            if (result.res=='ok') {
                var files = result.data;
               
                //console.log(files);
                fileTableBody.empty();
                if (files.length > 0) {
                    var i=0;
                    for(i=0;i<files.length;i++){
                    	var row = $("<tr>");
                        $("<td>").text(files[i].name).appendTo(row);
                        var readBtn = $("<button>").addClass("btn btn-info")
                            .text("阅读")
                            .data("fileName", files[i].name)
                            .appendTo($("<td>").appendTo(row));
                        readBtn.click(readFile);
                        row.appendTo(fileTableBody);
                    }
                   
                } else {
                    fileTableBody.append($("<tr>").append($("<td colspan='3'>").text("没有文件")));
                }
            }
        });
    }

    // 删除文件
    function readFile() {
        var fileName = $(this).data("fileName");
        window.location.href="/book?name="+fileName;
        
        
        
    }


    $(function () {
        // 显示文件列表
        getFileList();

    });
</script>
</body>
</html>
